<!--父级页面:控制除登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
  <!-- 1.display: flex;使用弹性布局，让父元素中的子元素横置，且父元素会根据子元素浮动后的实际高度自动填充高度   -->
  <div style="background-color: #0b1b41;color: white;" >
    <el-row style="padding-top: 10px;">
    <el-col :span="6">
<!--      <img src="logo.png" style="width: 50px;height: 50px;margin-left: 10px;">-->
      <router-link to="/" style="color:#fff; font-size: 30px; text-decoration:none;position:
      relative;top:8px;left:60px; pxfont-weight: bold; padding-left: 30px">
        智慧物业管理系统
      </router-link>
    </el-col>
    <el-col :span="18">
      <h1 style="text-align: right;">WELCOME TO WANLIU</h1>
    </el-col>
    </el-row>
  </div>
  <div style="display: flex;">
    <!--2.isCollapse为true:折叠左侧菜单栏,左侧菜单栏宽度为64px,右侧主体宽度为calc(100% - 64px)-->
    <div :style="{width:( isCollapse ? '64px': '208px')}">
      <!--4.左侧菜单栏-->
      <el-menu
          background-color="white"
          style="width:100%;height:100%;min-height:100vh;"
          text-color="black"
          active-text-color="gray"
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened router
          @select="selectMenu"
      >
        <!--4.2 左侧菜单栏的导航项 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size:21px;"><Menu /></el-icon><span>工作台</span>
          </template>
          <el-menu-item index="/workspace">工作台</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size:21px;"><HomeFilled /></el-icon>
            <span>资料管理</span>
          </template>
          <el-menu-item index="/building">楼座管理</el-menu-item>
          <el-menu-item index="/house">房屋管理</el-menu-item>
          <el-menu-item index="/inhabitant">住户管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size:21px;"><Van /></el-icon>
            <span>车行管理</span>
          </template>
          <el-menu-item index="/carport">车位管理</el-menu-item>
          <el-menu-item index="/vehicle">车辆管理</el-menu-item>
          <el-menu-item index="/fee">停车缴费管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size:21px;"><Management /></el-icon>
            <span>物业服务</span>
          </template>
          <el-menu-item index="/complain">投诉管理</el-menu-item>
          <el-menu-item index="/warranty">报修管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size:21px;"><WalletFilled /></el-icon>
            <span>缴费管理</span>
          </template>
          <el-menu-item index="/bill">账单管理</el-menu-item>
          <el-menu-item index="/toll">收费项目管理</el-menu-item>
          <el-menu-item index="/meterReading">抄表周期管理</el-menu-item>
          <el-menu-item index="/instrument">仪表管理</el-menu-item>
        </el-sub-menu>
      </el-menu>

    </div>
    <!--3.isCollapse为false:不折叠左侧菜单栏,左侧菜单栏宽度为208px,右侧主体宽度为calc(100% - 208px)-->
    <div :style="{width:( isCollapse ? 'calc(100% - 64px)': 'calc(100% - 208px)')}">
      <!--5.右侧:顶部菜单栏-->
      <el-header style="background-color:#fff;padding-top:22px;height:10vh;">
        <!--5.1 折叠图标与退出登录-->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size:20px;position:relative;top:3px;" @click="changeCollapsed"><Expand/></el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position:absolute;right:20px;">
                     <span style="font-size:19px;font-weight: bold;">
                         {{ user.username }}
                         <el-icon><arrow-down/></el-icon>
                     </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--5.2 面包屑导航-->
        <el-breadcrumb separator="/" style="position: relative;top:20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadCrumb">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!--6.右侧:主体内容是可变区域！-->
      <el-main style="padding:0;min-height:90vh;overflow-y: auto;">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

//定义变量控制菜单是否折叠
const isCollapse = ref(false);
//修改折叠状态
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value;
}
//获取登录的用户信息
const user = ref(getUser());
//退出登录功能
const logout = () => {
  if (confirm('确定要退出吗？')) {
    localStorage.removeItem('user');
    localStorage.removeItem('breadcrumb')
    window.location.href = '/login';
    user.value = '';
  }
}
//设置变量保存当前的面包屑导航的值，默认为用户列表界面
//||:如果localStorage.getItem('breadcrumb')的结果为null或undefined（即没有找到名为'breadcrumb'的项或其值为空）
//则逻辑OR运算符会执行右侧的操作，即返回'["用户管理", "用户列表"]'作为默认值。
const breadCrumb = ref( JSON.parse(localStorage.getItem('breadcrumb')) || ["工作台", "工作台"]);
//定义数组维护不同页面的面包屑值
let map = {
  '/workspace':['工作台','工作台'],
  '/building': ['资料管理','楼座管理'],
  '/house': ['资料管理','房屋管理'],
  '/inhabitant': ['资料管理','住户管理'],
  '/carport':['车行管理','车位管理'],
  '/vehicle':['车行管理','车辆管理'],
  '/fee':['车行管理','停车缴费管理'],
  '/complain':['物业服务','投诉管理'],
  '/warranty':['物业服务','报修管理'],
  '/bill':['缴费管理','账单管理'],
  '/toll':['缴费管理','收费项目管理'],
  '/meterReading':['缴费管理','超标周期管理'],
  '/instrument':['缴费管理','仪表管理'],
}
//选择菜单项时触发
const selectMenu = (index) => {
  //根据选择的菜单项设置面包屑导航的值
  breadCrumb.value = map[index];
  //将值存入localStorage中,防止刷新页面时数据丢失
  localStorage.setItem('breadcrumb', JSON.stringify(breadCrumb.value));
};
</script>